<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3动画示例</title>
<link href="animate.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	div{width:250px;text-align:center;margin:0px 10px 10px 0px;float:left;font-size:18px;}
	div span{width:250px;height:250px;background:rgba(153,204,0,0.6);display:block;line-height:250px;z-index:4;position:relative}
	body{overflow-x:hidden;width:1200px;margin:0px auto;font-family:"微软雅黑"}
	p{margin:10px 0px;color:#030;font-size:25px;width:100%;float:left}
	button{width:250px;cursor:pointer;border:none;outline:none;border-radius:10px;-webkit-border-radius:10px;z-index:40;position:relative;padding:5px 0px;margin-top:5px;}
	button:hover{background:#C00;color:#FFF;}
</style>
</head>
<body> 
<p>1，Attention Seekers</p>
<div>bounce</div>
<div>flash</div>
<div>pulse</div>
<div>rubberBand</div>
<div>shake</div>
<div>swing</div>
<div>tada</div>
<div>wobble</div>
<div>jello</div>



<p>2，Bouncing Entrances</p>
<div>bounceIn</div>
<div>bounceInDown</div>
<div>bounceInLeft</div>
<div>bounceInRight</div>
<div>bounceInUp</div>



<p>3，Bouncing Exits</p>
<div>bounceOut</div>
<div>bounceOutDown</div>
<div>bounceOutLeft</div>
<div>bounceOutRight</div>
<div>bounceOutUp</div>



<p>4，Fading Entrances</p>
<div>fadeIn</div>
<div>fadeInDown</div>
<div>fadeInDownBig</div>
<div>fadeInLeft</div>
<div>fadeInLeftBig</div>
<div>fadeInRight</div>
<div>fadeInRightBig</div>
<div>fadeInUp</div>
<div>fadeInUpBig</div>



<p>5，Fading Exits</p>
<div>fadeOut</div>
<div>fadeOutDown</div>
<div>fadeOutDownBig</div>
<div>fadeOutLeft</div>
<div>fadeOutLeftBig</div>
<div>fadeOutRight</div>
<div>fadeOutRightBig</div>
<div>fadeOutUp</div>
<div>fadeOutUpBig</div>
        


<p>6，Flippers</p>
<div>flip</div>
<div>flipInX</div>
<div>flipInY</div>
<div>flipOutX</div>
<div>flipOutY</div>



<p>7，Lightspeed</p>
<div>lightSpeedIn</div>
<div>lightSpeedOut</div>



<p>8，Rotating Entrances </p>
<div>rotateIn</div>
<div>rotateInDownLeft</div>
<div>rotateInDownRight</div>
<div>rotateInUpLeft</div>
<div>rotateInUpRight</div>



<p>9，Rotating Exits </p>
<div>rotateOut</div>
<div>rotateOutDownLeft</div>
<div>rotateOutDownRight</div>
<div>rotateOutUpLeft</div>
<div>rotateOutUpRight</div>



<p>10，Sliding Entrances</p>
<div>slideInUp</div>
<div>slideInDown</div>
<div>slideInLeft</div>
<div>slideInRight</div>



<p>11，Sliding Exits</p>
<div>slideOutUp</div>
<div>slideOutDown</div>
<div>slideOutLeft</div>
<div>slideOutRight</div>



<p>12，Zoom Entrances</p>
<div>zoomIn</div>
<div>zoomInDown</div>
<div>zoomInLeft</div>
<div>zoomInRight</div>
<div>zoomInUp</div>



<p>13，Zoom Exits </p>
<div>zoomOut</div>
<div>zoomOutDown</div>
<div>zoomOutLeft</div>
<div>zoomOutRight</div>
<div>zoomOutUp</div>



<p>14，Specials </p>
<div>hinge</div>
<div>rollIn</div>
<div>rollOut</div>
       


<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	$('div').wrapInner('<span></span>');
	$('div').append('<button type="button">Look at me</button>');
    $('button').click(function(e) {
		var Class_text = $(this).prev('span').text();
        $(this).prev('span').toggleClass('animated'+' '+Class_text);
    });
});
</script>
</body>
</html>
